<!--suppress TypeScriptUnresolvedReference -->
<script setup lang="ts">
import { ref } from "vue"
import { useRoute, useRouter } from "vue-router"
import { cartData, postItemData, updateCartData } from "@/api/items/types/types"
import { addToCartDataApi, getCartDataApi, newOrderApi, updateCartDataApi } from "@/api/items/items"
import Layout from "@/views/layout/Layout.vue"
import { ElMessage } from "element-plus"

const loading = ref(true)
const router = useRouter()
const cartItems = ref<cartData[]>([])
const addButtonFlag = ref(false)
const orderData = ref<postItemData[]>([])
const getCartItems = () => {
  loading.value = true
  getCartDataApi("HHHH")
    .then((res) => {
      cartItems.value = res.data
      loading.value = false
    })
    .catch((err) => {
      console.log(err)
    })
}
getCartItems()
const addItem = (itemId: string, quantity: number, userid: string) => {
  addButtonFlag.value = true
  setTimeout(() => {
    const data: updateCartData = {
      userid: userid,
      itemid: itemId,
      quantity: quantity
    }
    cartItems.value.at(cartItems.value.findIndex((item) => item.itemDTO.itemId == itemId)).quantity += quantity
    addToCartDataApi(data).then((res) => {
      if (res.message === "SUCCESS") {
        ElMessage.success("成功添加到购物车！")
      } else {
        ElMessage.error("添加到购物车失败！")
      }
      addButtonFlag.value = false
    })
  }, 500)
}

const gotoItem = (itemId) => {
  router.push("/category/" + "cat" + "/" + productId + "/" + itemId)
}
const updateCart = (itemId: string, quantity: number, userid: string) => {
  if (quantity == 0) {
    cartItems.value.filter((item) => {
      return item.itemDTO.itemId != itemId
    })
  }
  const data: updateCartData = {
    userid: userid,
    itemid: itemId,
    quantity: quantity
  }
  updateCartDataApi(data).then((res) => {
    if (res.message === "SUCCESS") {
      ElMessage.success("成功修改数量！")
    } else {
      ElMessage.error("修改数量失败！")
    }
  })
}

const submitOrder = () => {
  orderData.value = cartItems.value.map((item) => {
    return {
      itemId: item.itemDTO.itemId,
      quantity: item.quantity,
      listprice: item.itemDTO.listPrice
    }
  })
  newOrderApi(orderData.value).then((res) => {
    console.log(res)
  })
  // router.push("/order")
}

const formatListPrice = (listPrice) => {
  return "￥" + listPrice.toFixed(2)
}
</script>

<template>
  <layout>
    <h1 class="app-title">购物车</h1>
    <el-skeleton class="animal" animated v-if="loading || cartItems.length == 0" />
    <ul v-infinite-scroll="scrolling" v-else>
      <li v-for="item of cartItems" :key="item.itemId">
        <div class="animal" v-if="item.quantity != 0">
          <el-image class="pet-photo" :src="item.itemDTO.image" fit="fill" />
          <h2 class="pet-name" @click="gotoItem(item.itemDTO.itemId)">{{ item.itemDTO.itemId }}</h2>
          <p><strong>Product ID:</strong> {{ item.itemDTO.product.productId }}</p>
          <p><strong>Description:</strong> {{ item.itemDTO.attribute1 }} {{ item.itemDTO.product.name }}</p>
          <p v-if="item.quantity == 0">
            <strong>List Price:</strong>
            <el-text type="warning" size="large">{{ formatListPrice(item.itemDTO.listPrice) }}</el-text>
          </p>
          <p v-else>
            <strong>Total Price:</strong>
            <el-text type="warning" size="large">{{ formatListPrice(item.itemDTO.listPrice * item.quantity) }}</el-text>
          </p>
          <el-button
            type="primary"
            @click="addItem(item.itemDTO.itemId, 1, 'HHHH')"
            :loading="addButtonFlag"
            v-if="item.quantity == 0"
            >Add to Cart</el-button
          >
          <el-input-number v-model="item.quantity" v-else @change="updateCart(item.itemDTO.itemId, $event, 'HHHH')" />
        </div>
      </li>
    </ul>
    <el-row>
      <el-col :span="15" style="text-align: center; margin: 20px 0">
        <el-button type="success" size="large" @click="getCartItems">刷新</el-button>
      </el-col>
      <el-col :span="1" style="text-align: center; margin: 20px 0">
        <el-button type="warning" size="large" @click="submitOrder">结算</el-button>
      </el-col>
    </el-row>
  </layout>
</template>

<style scoped>
.animal {
  max-width: 650px;
  padding: 20px;
  margin: 30px auto;
  background-color: #fff;
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.animal h4 {
  margin: 0 0 6px 0;
}

.pet-photo {
  height: 160px;
  float: left;
  width: 200px;
  margin-right: 15px;
}

.pet-name {
  font-size: 2rem;
  font-weight: normal;
}
.app-title {
  text-align: center;
  font-weight: normal;
  font-size: 2.6rem;
}
</style>
